import {Component} from 'react';
import React from 'react';
import {Button, Tag} from 'antd';
import "./index.less"
import {inject, observer} from "mobx-react";
import CourseStore from "../../stores/CourseStore";
import { action } from 'mobx';

interface KeywordFilterSearchProps {
    filters: Array<FilterKeywords>;
    courseStore?: CourseStore;
    resetHomePage:any;
}

interface FilterKeywords {
    title: string;
    multiple?: boolean;
    keywords: Array<any>;
}

interface KeywordFilterSearchState {
    selected: { values?: Array<string>; [key: string]: Array<string> | undefined };
    more?: boolean;
    current: number;
}

@inject("courseStore")
@observer
class KeywordFilterSearch extends Component<KeywordFilterSearchProps, KeywordFilterSearchState> {
    constructor(props: any) {
        super(props);
        this.state = {
            selected: {"课程标签": ['0'], "课程类型": ['0'], "课程形式": ['0']}, more: false, current: -1
        };
    }

    render() {
        const CheckableTag = Tag.CheckableTag;
        const course = this.props.courseStore;
        return (
            <div className="tag-back" style={{height: "100%"}}>
                {this.props.filters.map((item, ind) => {
                    return (
                        <div
                            key={ind}
                            className="moreTag"
                            style={{height: "100%"}}
                            /*style={{
                                margin: `12px 12px ${index + 1 == this.props.filters.length ? '12px' : '0px'}`,
                            }}*/
                        >
                            <div style={{
                                marginRight: "0.34rem",
                                fontSize: "0.2rem",
                                //marginTop: "-0.02rem",
                                // fontWeight: "bold"
                            }}>{item.title}</div>
                            <div className="tags">
                                {
                                    item.keywords.map((tag: any, index) => {
                                        const newLocal = this.state.selected[item.title]?.indexOf(tag.id);
                                        return (
                                            <CheckableTag
                                                key={tag.id}
                                                checked={newLocal != undefined ? newLocal >= 0 : false}
                                                onChange={(checked) => {this.props?.resetHomePage?.();this.handleChange(item, tag.id, checked)}}
                                            >
                                                {tag?.typeName}{tag?.tag}
                                            </CheckableTag>
                                        );
                                    })}
                            </div>
                            {/*{
                                item.keywords.length >= 6 ?
                                    <div
                                        className="more"
                                        onClick={() => {
                                            const temp = course.more;
                                            course.SetMore(!temp);
                                            console.log(ind);
                                            this.setState({current: temp ? -1 : ind});
                                        }
                                        }>
                                        <div>{this.state.current === ind ? "收起" : "更多"}</div>
                                        <img style={{ width: "0.13rem", height: "0.07rem", marginLeft: "0.08rem" }}
                                             src={this.state.current === ind ? "./ui/CourseListPage/icon_shang.png" : "./ui/CourseListPage/icon_xia.png"}
                                        />
                                    </div>
                                    : null
                            }*/}
                        </div>
                    );
                })}
            </div>
        );
    }

    handleChange(filter: FilterKeywords, tag: string, checked: boolean): void {
        const {selected} = this.state;
        const current = (selected[filter.title] ? selected[filter.title] : []) as [];
        const nextSelectedTags = filter.multiple
            ? checked
                ? [...current, tag]
                : current?.filter((t) => t !== tag)
            : checked
                ? [tag]
                : [tag];
        const newSelect = {...selected};
        newSelect[filter.title] = nextSelectedTags;
        //console.log('You are interested in: ', nextSelectedTags);

        this.setState({selected: newSelect});
        const id = nextSelectedTags.length === 0 ? '0' : tag;
        if (filter.title === "课程类型") {
            this.props.courseStore.SetCourseType(parseInt(id));
        } else if (filter.title === "课程标签") {
            this.props.courseStore.SetCourseTag(parseInt(id));
        } else {
            this.props.courseStore.SetMode(parseInt(id));
        }
    }
}

export default KeywordFilterSearch;
